<template>
	<view class="face">
		<view  class="img">
			<image  class="img-face" mode="aspectFill" :src="imgurl"></image>
		</view>
		<view class="btn" @click="updateFace">
			更改头像
		</view>
	</view>
</template>

<script setup>
	let severUrl=getApp().globalData.severUrl
	import {onShow} from "@dcloudio/uni-app"
import { ref } from "vue";
	let imgurl=ref()
	onShow(()=>{
		let userInfo=uni.getStorageSync("userInfo")
		imgurl.value=userInfo.face
	})
	const updateFace=()=>{
		uni.chooseImage({
			count:1,
			crop:{
				quality:60,
				width:300,
				height:300
			},
			success(e){
				uni.uploadFile({
					url:severUrl+"/userInfo/modifyImage",
					header:{
						headerUserId:uni.getStorageSync("userId"),
						headerUserToken: uni.getStorageSync("userToken")
					},
					filePath:e.tempFilePaths[0],
					name:"file",
					formData:{
						type:2,
						userId:uni.getStorageSync("userId")
					},
					success(res){
						let result= JSON.parse(res.data)
						if(result.status==200){
							uni.showToast({
								title:result.msg
							})
							uni.navigateBack()
						}else{
							uni.showToast({
								title:result.msg
							})
						}
							
					}
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.face{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		.img{
			margin-bottom: 80rpx;
		}
		.img-face{
			width: 750rpx;
		}
		.btn{
			background-color: #888;
			padding:10rpx 30rpx;
			border-radius: 10rpx;
		}
	}
</style>
